<template>
  <div class="blacklist">
    <div>

      <span style="color:#666666; margin-left:10px;">买号:</span>
      <el-input v-model="input" placeholder="请输入内容" style="width:200px;height:30px;margin-left:10px;"></el-input>
      <span style="color:#666666; margin-left:20px;">提交时间:</span>
      <el-date-picker
        v-model="value6"
        type="datetimerange"
        style="margin-left:20px;width:300px;"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <el-button type="primary" style="margin-left:20px;transform:translateY(-1px)" size="mini">查询</el-button>
      <div @click="add" style="cursor: pointer;margin-top:-30px;">
        <span style="margin-right:20px;color:#409EFF;float: right;">添加账号黑名单</span>
        <img style="width:24px;height:24px;float: right;margin-right:5px;" src="../../assets/adding.png" alt="">
      </div>
    </div>
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="30%">
      <div style="padding: 0 50px">
        <h2 style="border-bottom: 2px solid #ccc; line-height: 60px; margin: 0;">添加账号黑名单</h2>
        <div style="padding-top: 30px;">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item
              label="订单编号"
              prop="name"
              :rules="[
              { required: true, message: '订单编号不能为空'},
              { type: 'number', message: '订单编号必须为数字值'}
              ]">
              <el-input type="name" v-model.number="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="结束时间">
              <!--<el-col :span="11">-->
                <!--<el-date-picker value-format="timestamp" type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>-->
              <!--</el-col>-->
              <el-select style="width: 100%" v-model="form.date1" placeholder="请选择">
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="拉黑原因">
              <el-select style="width: 100%" v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-show="value == '其他原因'"
              label="原因"
              prop="desc"
              :rules="[
              { required: true, message: '原因不能为空'},
              ]">
              <el-input type="textarea" :rows="5" v-model="form.desc"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消提交</el-button>
        <el-button type="primary" @click="submit1">确认提交</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title=""
      :visible.sync="dialogVisible1"
      width="30%">
      <div style="padding: 0 50px">
        <h2 style="border-bottom: 2px solid #ccc; line-height: 60px; margin: 0;">添加地区黑名单</h2>
        <div style="padding-top: 30px;">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item
              label="地区"
              prop="name"
              :rules="[
              { required: true, message: '地区不能为空'},
              ]">
              <el-input type="name" placeholder="填写加入黑名单的市区" v-model.number="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
              label="原因"
              prop="desc"
              :rules="[
              { required: true, message: '原因不能为空'},
              ]">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消提交</el-button>
        <el-button type="primary" @click="submit2">确认提交</el-button>
      </span>
    </el-dialog>
    <div style="height: 50px;"></div>
    <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="order"
        label="买号"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="user"
        label="买家"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="add_time"
        label="拉黑时间"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="note"
        label="拉黑原因"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        align="center"
        width="">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="del2(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="备注"
        align="center"
        width="">
      </el-table-column>
      <el-pagination :page-size="20" :current-page="searchList.pn" layout="prev, pager, next"
                     :total="searchList.total" @current-change="pnChange" v-if="searchList.total > 20">
      </el-pagination>
    </el-table>
    <div style="padding-top: 30px;">
      <div @click="add1" style="cursor: pointer;margin-top:30px;">
        <span style="margin-right:20px;color:#409EFF;float: right;">添加地区黑名单</span>
        <img style="width:24px;height:24px;float: right;margin-right:5px;" src="../../assets/adding.png" alt="">
      </div>
    </div>
    <div style="height: 50px;"></div>
    <el-table
      :data="tableData1"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="name"
        label="拉黑城市"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="add_time"
        align="center"
        label="拉黑时间"
        width="">
      </el-table-column>
      <el-table-column
        prop="note"
        label="拉黑原因"
        align="center"
        width="">
      </el-table-column>
      <el-table-column
        prop="address"
        align="center"
        label="操作"
        width="">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="del1(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="address"
        label="备注"
        align="center"
        width=" ">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    name: "AdminBlacklist",
    data(){
      return{
        searchList: {
          search: "user",
          searchValue: "",
          filter: {
            status: "",
            goodcomment: ""
          },
          pn: 1,
          total: 0
        },
        searchList1: {
          search: "user",
          searchValue: "",
          filter: {
            status: "",
            goodcomment: ""
          },
          pn: 1,
          total: 0
        },
        dialogVisible: false,
        dialogVisible1: false,
        form: {
          name: '',
          region: '',
          date1: '0',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        tableData: [],
        tableData1: [],
        options: [{
          value: '买号没有实名认证',
          label: '买号没有实名认证'
        }, {
          value: '使用淘宝客/返利网',
          label: '使用淘宝客/返利网'
        }, {
          value: '使用信用卡/花呗',
          label: '使用信用卡/花呗'
        }, {
          value: '买号导致降权',
          label: '买号导致降权'
        }, {
          value: '私自申请退款',
          label: '私自申请退款'
        },
          {
            value: '其他原因',
            label: '其他原因'
          }],
        options1: [{
          value: '0',
          label: '1个月'
        }, {
          value: '1',
          label: '3个月'
        }, {
          value: '2',
          label: '6个月'
        }, {
          value: '3',
          label: '9个月'
        }],
        value: '买号没有实名认证',
        value1: '0'
      }
    },
    methods:{
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background:rgb(144,195,252);opacity:0.4;color:white;text-align:center;font-size:9px;font-weight:500;'
        } else {
          return ''
        }
      },
      del1(i){
        let _this = this;
        _this.$http
          .post("/api/api.php", {
            id: "deleteSjBlackC",
            did:i
          })
          .then(function (response) {

          });
      },
      del2(i){
        // let _this = this;
        // _this.$http
        //   .post("/api/api.php", {
        //     id: "deleteSjBlackC",
        //     did:i
        //   })
        //   .then(function (response) {
        //
        //   });
      },
      pnChange(pn) {
        this.searchList.pn = pn;
        this.getTaskInfoList();
      },
      add(){
        this.dialogVisible = true
      },
      submit1(){
        let _this = this;
        _this.$http
          .post("/api/api.php", {
            id: "upSjBlack",
            order:_this.form.name,
            note:_this.form.desc,
          })
          .then(function (response) {
            _this.dialogVisible = false
            this.init()
          });
      },
      submit2(){
        let _this = this;
        _this.$http
          .post("/api/api.php", {
            id: "upSjBlackC",
            name:_this.form.name,
            note:_this.form.desc,
            end_time:_this.form.date1
          })
          .then(function (response) {
            _this.dialogVisible1 = false
            this.init1()
          });
      },
      add1(){
        this.dialogVisible1 = true
      },
      init(){
        let _this = this;
        _this.$http
          .post("/api/api.php", {
            id: "getSjBlack",
            search: JSON.stringify(_this.searchList),
          })
          .then(function (response) {
            _this.tableData = response.data.data
            _this.searchList.total = parseInt(response.data.total);
          });
      },
      init1(){
        let _this = this;
        _this.$http
          .post("/api/api.php", {
            id: "getSjBlackC",
            search: JSON.stringify(_this.searchList1),
          })
          .then(function (response) {
            _this.tableData1 = response.data.data
            _this.searchList1.total = parseInt(response.data.total);
          });
      }
    },
    created(){
      this.init()
      this.init1()
    }
  }
</script>

<style lang="scss">
.blacklist {
    .el-button{
      height:auto;
    }
   .el-input__inner{
     height:30px;
     width:100%;
     // margin-top:-10px;
   }
    .el-range-editor.el-input__inner{
      padding:0 10px;
    }

    .el-dialog__body {
      .el-input__inner{
       width:100%;
     }



     .el-form-item {
      margin-bottom: 13px;
     }
    }
}

</style>
